﻿@{
    ViewBag.Title = "Home";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="container-fluid">
    <div class="row-fluid" style="height: 720px">
        <div class="span3">
            <div class="well sidebar-nav">
                <ul class="nav nav-list">
                      <li class="nav-header">Chart Type</li>
              <li class="option active"><a href="#" onclick="createLineChart()">Line Chart</a></li>
              <li class="option"><a href="#" onclick="createBarChart()">Bar Chart</a></li>
              
                </ul>
            </div>
            <!--/.well -->
        </div>
        <!--/span-->
        <div class="span9">
            <div class="hero-unit">
                <div id="chart"></div>
            </div>
            <div class="span9">

                <div class="span4">
                </div>
                <!--/span-->
                <div class="span4">
                </div>
                <!--/span-->
            </div>
            <!--/row-->
            <div class="row-fluid">
                <div class="span4">
                </div>
                <!--/span-->
                <div class="span4">
                </div>
                <!--/span-->
                <div class="span4">
                </div>
                <!--/span-->
            </div>
            <!--/row-->
        </div>
        <!--/span-->
    </div>
    <!--/row-->



    <footer>
        <p>&copy; Company 2013</p>
    </footer>

</div>

<script type="text/javascript">
    // Generate sample data
    var linedata = [];
    for (var x = -100; x < 100; x += 0.2) {
        linedata.push({ x: x, y: Math.sin(x) });
    }

    // Helper function that constructs DataSource filter
    // for the x value
    function getFilter(xMin, xMax) {
        return [{
            field: "x",
            operator: "gt",
            value: xMin
        }, {
            field: "x",
            operator: "lt",
            value: xMax
        }]
    }

    function createLineChart() {
        $("#chart").kendoChart({
            dataSource: {
                data: linedata,
                filter: getFilter(-10, 10)
            },
            xAxis: {
                name: "xAxis",
                min: -10,
                max: 10,
                labels: {
                    format: "{0:N1}"
                }
            },
            series: [{
                type: "scatterLine",
                xField: "x",
                yField: "y",
                markers: {
                    visible: false
                }
            }],
            transitions: false,
            drag: setRange,
            zoom: setRange
        });

        function setRange(e) {
            var chart = e.sender;
            var ds = chart.dataSource;
            var options = chart.options;

            // Prevent document scrolling on mousewheel zoom
            e.originalEvent.preventDefault();

            var xRange = e.axisRanges.xAxis;
            if (xRange) {
                // Suggested axis ranges
                var xMin = xRange.min;
                var xMax = xRange.max;

                // Limit maximum zoom-in
                if (xMax - xMin < 2) {
                    return;
                }

                // Set x axis range in chart options
                options.xAxis.min = xMin;
                options.xAxis.max = xMax;

                // Filters the data source and rebinds the chart
                // which also applies the axis limits set above
                ds.filter(getFilter(xMin, xMax));
            }
        }
    }

    // Minimum distance in px to start dragging
    var DRAG_STEP = 10;

    // Minimum/maximum range length
    var MIN_RANGE = 5;
    var MAX_RANGE = 50;

    // Sample data
    var bardata = [];
    for (var i = 0; i < 100; i++) {
        var val = Math.round(Math.random() * 10);
        bardata.push({
            // We'll scroll the chart by filtering the index
            index: i,
            val: val
        });
    }

    // Selected Range
    var rangeStart = 0;
    var rangeLength = MIN_RANGE;

    // Helper function that constructs DataSource filter
    function getBarFilter(start, length) {
        return [{
            field: "index",
            operator: "gte",
            value: start
        }, {
            field: "index",
            operator: "lte",
            value: start + length
        }]
    }

    function createBarChart() {
        $("#chart").kendoChart({
            dataSource: {
                data: bardata,
                filter: getBarFilter(rangeStart, rangeLength)
            },
            categoryAxis: {
                field: "index"
            },
            valueAxis: {
                // Optionally set min and max
                // to avoid axis range changes
            },
            series: [{
                type: "column",
                field: "val"
            }],
            transitions: true,
            drag: onDrag,
            dragEnd: onDragEnd,
            zoom: onZoom
        });

        var newStart;
        function onDrag(e) {
            var chart = e.sender;
            var ds = chart.dataSource;
            var delta = Math.round(e.originalEvent.x.initialDelta / DRAG_STEP);

            if (delta != 0) {
                newStart = Math.max(0, rangeStart - delta);
                newStart = Math.min(bardata.length - rangeLength, newStart);
                ds.filter(getBarFilter(newStart, rangeLength));
            }
        }

        function onDragEnd() {
            rangeStart = newStart;
        }

        function onZoom(e) {
            alert('hi');
            var chart = e.sender;
            var ds = chart.dataSource;
            rangeLength = Math.min(Math.max(rangeLength + e.delta, MIN_RANGE), MAX_RANGE);
            ds.filter(getBarFilter(rangeStart, rangeLength));

            // Prevent document scrolling
            e.originalEvent.preventDefault();
        }
    }
    $(document).ready(createLineChart);
    $("#chart").bind("kendo:skinChange", createLineChart);
    $('.option').bind("click", function () {
        $(this).siblings('.active').removeClass('active');
        $(this).addClass('active');

    });
</script>
